<template>
  <!-- 显示上传的图片 -->
  <div>
    <panThumb :image="avatar" @click="imagecropperShow = true" />

    <!--url:上传接口地址，field:向服务器上传的文件名,    -->
    <!-- 图片裁剪组件 -->
    <vue-image-crop-uploadController
      url="https://httpbin.org/post"
      field="avatar1"
      img-bgc="#fff"
      v-model="imagecropperShow"
      :lang-ext="{ hint: '点击,或拖动图片至此处' }"
      :img="avatar"
      ki="0"
      @crop-success="cropSuccess"
      @crop-upload-controller-success="cropUploadSuccess"
      @crop-upload-controller-fail="cropUploadFail"
      :no-rotate="false"
      :headers="headers"
      :params="otherParams"
    />
  </div>
</template>

<script setup>
import panThumb from "./panThumb.vue";
import VueImageCropUpload from "vue-image-crop-upload";
// 头像
const imagecropperShow = ref(false);
const avatar = ref(
  "https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191"
);

const headers = reactive({
  smail: "*_~",
});
const otherParams = reactive({
  token: "123456798",
  name: "img",
});
const previewAvatar = (event) => {
  const files = event.target.files;
  if (files.length > 0) {
    const file = files[0];
    const reader = new FileReader();
    reader.onload = () => {
      avatar.value = reader.result;
    };
    reader.readAsDataURL(file);
  }
};
const cropSuccess = (imgDataUrl) => {
  // 图片裁剪成功后，将 imgDataUrl 赋值给 avatar
  avatar.value = imgDataUrl;
};
const cropUploadSuccess = (jsonData, field) => {
  console.log("-------- uploadController success --------");
  console.log(jsonData);
  console.log("field: " + field);
};
const cropUploadFail = (jsonData, field) => {
  onsole.log("-------- uploadController fail --------");
  console.log(status);
  console.log("field: " + field);
};
</script>

<style scoped lang="scss"></style>
